<template>
	<view class="goods_details" >
		<SkeletonGoodsDetetails v-if="!isFinish"></SkeletonGoodsDetetails>
		<scroll-view class="details" scroll-y v-else>
			<view class="logo">
				<image :src="goodsDetails.goods_big_logo" mode="aspectFill" style="width: 100%;"></image>
			</view>
			<view class="price">
				￥{{goodsDetails.price}}
			</view>
			<view class="name">
				{{goodsDetails.name}}
			</view>
			<view class="intro" v-html="goodsDetails.introduce">
				
			</view>
		</scroll-view>
		<uni-goods-nav  @click="" style="position: fixed;bottom:0;width:100%;"  />
	</view>
</template>

<script setup>
	import{ref} from'vue'
	import{onLoad}from'@dcloudio/uni-app'
	let isFinish=ref(false)
	onLoad((data)=>{
		console.log(data.id)
		getGoodsDetails(data.id)
	})
	// 定义返回的商品对象
	const goodsDetails=ref({})
	async function getGoodsDetails(id){
		isFinish.value=false
		uni.showLoading({
			title:"加载中..."
		})
		let res=await uni.$post("/goodInfoById",{id})
		if(res.code==200){
			isFinish.value=true
			uni.hideLoading()
			goodsDetails.value=res.goodsList[0]
			goodsDetails.value.goods_big_logo=uni.$base_url+goodsDetails.value.goods_big_logo
		}
		console.log(goodsDetails.value)
	}
</script>

<style lang="scss">
.details{
	padding: 0 10rpx;
	height: calc(100vh - 100px);
	.price{
		color: #ff6700;
		font-size: $uni-font-size-lg;
		margin: 5px 0;
	}
	.name{
		font-size: $uni-font-size-lg;
		color: $uni-text-color-grey;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;		
	}
}
</style>
